<template>
  <div class="myorder-box flex fdc jcs">
    <div class="myorder-item-b">
      <div v-if="orderList.length > 0">
        <div
          class="myorder-item flex jcs alc"
          :class="['cancel_sys','cancel_user'].includes(item.status)  ? 'disabled' : ''"
          v-for="item in orderList"
          :key="item.index"
          @click="gotodetail(item)"
        >
          <div class="myorder-item-l" >
            <p class="orderitem-num fs12 cl9 pb12">
              订单号：{{ item.tradeNo }}
            </p>
            <p class="orderitem-tit fs15 cl3 fw500 pb2">{{ item.title }}</p>
            <p class="orderitem-date fs13 cl6">
              <span v-if="item.time" class="cl6 mr16">{{
                item.starttime
              }}</span>
              <span class="cl9"> ¥ {{ item.fee }} × {{ item.quantity }}</span>
            </p>
          </div>
          <div class="myorder-item-r">
            <p class="mb15">
              <span class="fs16 fw500 clFB mr10">¥ {{ item.amount }}</span>
              <span class="fs14 cl6 fw500">{{ statusMap(item) }}</span>
            </p>
            <p>
              <el-button
                v-if="item.status === 'new_locked' "
                size="mini"
                @click.stop="cancleorder(item)"
                >取消</el-button
              >
              <el-button
                type="primary"
                v-if="item.status === 'new_locked' && item.new"
                size="mini"
                @click.stop="gopay(item)"
                >去支付</el-button
              >
              <el-button @click.stop="gotiukuan(item)" v-if="item.status ==='paid_success'" size="mini">退款</el-button>
            </p>
          </div>
        </div>
      </div>
      <div v-else class="flex jcc alc">
        暂无订单
      </div>
    </div>

    <!-- <el-pagination
      class="order-paganation"
      background
      layout="prev, pager, next"
      :total="1000"
    >
    </el-pagination> -->
  </div>
</template>

<script>
import { orderList, cancelOrder, applyOrderRefund, repeatedPayOrder, payAli } from '@/http/protocol'
export default {
  name: 'myorder',
  data () {
    return {
      orderList: []
    }
  },
  methods: {
    async gotodetail (item) {
      const { tradeNo = '' } = item
      if (!tradeNo) return false
      this.$router.push(`/orderdetail/${item.tradeNo}`)

      // this.$confirm('确认支付？', '确认信息').then(async () => {
      //   const res1 = await repeatedPayOrder({ tradeNo })
      //   if (res1.success) {
      //     this.$ok('支付成功')
      //     this.getorderList()
      //   } else {
      //     this.$err(res1.msg)
      //   }
      // })
    },
    async gotiukuan (item) {
      const { tradeNo = '', orderVisitorInfoList } = item
      if (!tradeNo) return false
      const param = {
        tradeNo,
        visitorInfoIds: orderVisitorInfoList.map(item => item.id).join(',')
      }
      this.$confirm('确认退款？', '确认信息').then(async () => {
        const res1 = await applyOrderRefund(param)
        if (res1.success) {
          this.$ok('退款成功')
          this.getorderList()
        } else {
          this.$err(res1.msg)
        }
      })
    },
    async gopay (item) {
      const { tradeNo = '' } = item
      if (!tradeNo) return false
      this.$confirm('确认支付？', '确认信息').then(async () => {
        const res1 = await repeatedPayOrder({ tradeNo })
        if (res1.success) {
          // this.$ok('支付成功')
          payAli(res1.data)
          this.getorderList()
        } else {
          this.$err(res1.msg)
        }
      })
    },
    async getorderList () {
      const res = await orderList()
      // const arr = ['new_locked', 'paid_certain', 'paid_suceess']
      if (res.success) {
        const resultList = res.data.resultList
        // resultList = resultList.filter(
        //   (item) =>
        //     item.status === 'paid_certain' ||
        //     item.status === 'paid_success' ||
        //     (item.status === 'new_locked' && item.new)
        // )
        console.log(resultList)
        this.orderList = resultList
      } else {
        this.$err(res.msg)
      }
      console.log(res)
    },
    statusMap (item) {
      const map = {
        new_locked: '待支付',
        paid_certain: '支付成功 出票中',
        paid_success: '支付成功',
        paid_return_succ: '退款成功',
        cancel_user: '已取消',
        cancel_sys: '已取消'
      }
      return map[item.status] || item.status
    },
    async cancleorder (item) {
      const { tradeNo = '' } = item
      if (!tradeNo) return
      this.$confirm('确认取消？', '确认信息').then(async () => {
        const res1 = await cancelOrder(tradeNo)
        if (res1.success) {
          this.$ok('取消成功')
          this.getorderList()
        } else {
          this.$err(res1.msg)
        }
      })
    }
  },
  mounted () {
    this.getorderList()
  }
}
</script>

<style scoped lang="less">
.myorder-box {
  width: 100%;
  max-width: 1274px;
  margin: 0 auto;
  margin-top: 24px;
  cursor: pointer;
  .order-paganation {
    align-self: center;
    padding-top: 10px;
    padding-bottom: 20px;
  }
  .myorder-item-b {
    height: 100%;
  }
  .myorder-item {
    width: 100%;
    height: 104px;
    margin-bottom: 10px;
    border-radius: 8px;
    border: 1px solid #f4f4f4;
    padding: 16px 32px;
    &:hover {
      background: #f4f4f4;
    }
    .myorder-item-r {
      text-align: right;
    }
  }
  .disabled {
    * {
      color: #ccc;
    }
  }
}
</style>
